<template>
	<view class="page">
		<view class="bg-primary" style="height: 400rpx; position: absolute; width: 100vw; top: 0"></view>
		<StoreInfo v-if="info" :info="info.detail"></StoreInfo>
		<view class="block">
			<view class="p-20 flex jus-b">
				<view class="text-primary text-lg"> 今日销售额 </view>
				<view>¥<u-count-to color="black" decimals="2" :fontSize="32" :startVal="0"
						:endVal="info.todayOrderMoney || 0"></u-count-to></view>
			</view>
			<view class="flex text-center p-20 border-b text-sm">
				<view class="flex-1">
					<view class="text-gray">本月</view>
					<view class="mt-10">¥<u-count-to color="black" decimals="2" :fontSize="32" :startVal="0"
							:endVal="info.monthOrderMoney || 0"></u-count-to></view>
				</view>
				<view class="flex-1">
					<view class="text-gray">本年</view>
					<view class="mt-10">¥<u-count-to color="black" decimals="2" :fontSize="32" :startVal="0"
							:endVal="info.yearOrderMoney || 0"></u-count-to></view>
				</view>
				<view class="flex-1">
					<view class="text-gray">累计</view>
					<view class="mt-10">¥<u-count-to color="black" decimals="2" :fontSize="32" :startVal="0"
							:endVal="info.orderMoney || 0"></u-count-to></view>
				</view>
			</view>
			<view class="flex">
				<view class="p-20 flex jus-b flex-1 ali-c border-r">
					<view class="text-center">
						<view class="text-primary text-lg">今日订单</view>
						<view>
							<u-count-to :fontSize="32" :startVal="0" :endVal="info.todayOrderCount || 0"></u-count-to>
						</view>
					</view>
					<view class="text-sm text-gray">
						<view>待发货 <u-count-to :fontSize="26" :startVal="0"
								:endVal="info.todayOrderCount1 || 0"></u-count-to></view>
						<view>待收货 <u-count-to :fontSize="26" :startVal="0"
								:endVal="info.todayOrderCount2 || 0"></u-count-to></view>
						<view>待售后 <u-count-to :fontSize="26" :startVal="0"
								:endVal="info.todayOrderCount3 || 0"></u-count-to></view>
					</view>
				</view>
				<view class="p-20 flex jus-b flex-1 ali-c">
					<view class="text-center">
						<view class="text-primary text-lg">商品</view>
						<view> <u-count-to :fontSize="32" :startVal="0" :endVal="info.goodscount || 0"></u-count-to></view>
					</view>
					<view class="text-sm text-gray">
						<view>出售中 <u-count-to :fontSize="26" :startVal="0" :endVal="info.salesgoodscount || 0"></u-count-to>
						</view>
						<view>待审核 <u-count-to :fontSize="26" :startVal="0" :endVal="info.checkgoodscount || 0"></u-count-to>
						</view>
						<view>仓库中 <u-count-to :fontSize="26" :startVal="0"
								:endVal="info.checkgoodscount1 || 0"></u-count-to></view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="vblock flex jus-b p-20 radius-md">
			<view class="title">今日投诉</view>
			<text>0</text>
		</view> -->
		<view class="vblock flex jus-b p-20 mt-20 radius-md" @click="$go('/admin/rank/rank?type=1')">
			<view class="title">本月商品销售排行榜</view>
			<u-icon name="more-circle" size="30"></u-icon>
		</view>
		<view class="vblock flex jus-b p-20 mt-20 radius-md" @click="$go('/admin/rank/rank?type=2')">
			<view class="title">本月商品评论排行</view>
			<u-icon name="more-circle" size="30"></u-icon>
		</view>
		<view class="vblock flex jus-b p-20 mt-20 radius-md" @click="$go('/admin/sale-count/sale-count')">
			<view class="title">销售统计</view>
			<u-icon name="more-circle" size="30"></u-icon>
		</view>
		<adminBottomTab></adminBottomTab>
	</view>
</template>

<script>
import StoreInfo from "./storeInfo.vue"
import adminBottomTab from "../../components/admin-bottom-tab.vue"
import request from "@/utils/admin-request.js"
export default {
	components: { StoreInfo, adminBottomTab },
	data() {
		return {
			title: "Hello",
			info: null,
		}
	},
	onLoad() {
		request({
			url: "api/Merch/index",
		}).then((res) => {
			this.info = res.data
		})
	},
	methods: {},
}
</script>

<style lang="scss">
.page {
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 30rpx;

	.vblock {
		background-color: white;
		margin: 0 20rpx;
		margin-top: 20rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			position: relative;
			padding-left: 20rpx;
		}

		.title::before {
			content: "";
			position: absolute;
			left: 0;
			bottom: -10rpx;
			width: 8rpx;
			height: 70%;
			border-radius: 100rpx;
			background-color: $u-primary;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.background {
		width: 100%;
		height: 400rpx;
		background: red;
		background-size: 100% 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.block {
		margin: 0 30rpx;
		background-color: white;
		position: relative;
		border-radius: 10rpx;
	}
}
</style>
